<template>
  <section class="index">
    <div class="topTitle blue getTop">
      <span class="goBack" @click="goBack"><i></i></span> 文章中心
    </div>
    <div class="newList">
      <div @click="goNew(item.id)" class="item" v-for="item in newList">
        <img :src="item.res" alt="">
        <p class="name">{{item.title}}</p>
        <p class="click">
          <span class="yue">阅读量:{{item.look_count}}</span>
          <span class="zan">点赞:{{item.like_count}}</span>
          <span class="time">{{item.updated_at}}</span>
        </p>
      </div>

      <div v-if="loadStatic" class="loadingItem"><span></span></div>
      <div v-else class="notMore">---- 这是我们的底线 ----</div>

    </div>
  </section>
</template>
<script>
import { Get, Post, Delete } from '@/config/api.js'

export default {
  name: 'Home',
  data() {
    return {
      newList: [],
      img: '/static/images/appBanner01.jpg',
      loadStatic: true, //加载状态
      onPage: 1, //当前页面
      allDataPage: '', //总页数
    }
  },
  mounted() {
    this.getData(1)
    this.getSet()
  },
  methods: {
    //返回上一页
    goBack() {
      this.$router.go(-1)
    },
    async getData(num) {
      await Get('/article?page=' + num, this.$store.state.token).then((res) => {
        this.newList.push(...res.data)
        this.txtNum = res.meta.pagination.total
        this.allDataPage = res.meta.pagination.total_pages
      })
    },
    //去详情页
    goNew(id) {
      this.$router.push({ path: '/newShow', query: { id: id } })
    },
    //下拉加载更多
    getSet() {
      let that = this
      $(window).scroll(function() {
        var h = $(document.body).height(); //网页文档的高度 
        var c = $(document).scrollTop(); //滚动条距离网页顶部的高度 
        var wh = $(window).height(); //页面可视化区域高度
        if (Math.ceil(wh + c) >= h) {
          if (that.onPage < that.allDataPage) {
            that.onPage++
              that.getData(that.onPage)
          } else {
            that.loadStatic = false
          }
        }
      })
    },
    shopSet() {
      $(window).unbind('scroll');
    }


  },
  beforeDestroy() {
    this.shopSet()
  }
}

</script>
